<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>更换头像</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css">
    <link rel="stylesheet" href="../../../admin/css/dimples.css">
    <link rel="icon" href="../../../admin/images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../../../admin/css/other/center.css"/>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space15">
    <div class="layui-col-xs9">
        <div style="height:325px;background-color: rgb(247, 247, 247);">
            <img id="sourceImage" src="">
        </div>
    </div>
    <div class="layui-col-xs3" style="padding-left:0px;">
        <div id="previewImage"
             style="width:210px;height:210px;border: 1px solid rgb(200, 200, 200);border-radius: 50%;overflow:hidden;">
        </div>
    </div>
</div>
<div class="layui-row">
    <div class="layui-form-item">
        <div class="layui-input-inline layui-btn-container" style="width: auto;vertical-align:top;">
            <button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-left" cropper-event="rotate"
                    data-option="-15" title="左旋15°"></button>
            <button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-right" cropper-event="rotate"
                    data-option="15" title="右旋15°"></button>
            <button class="pear-btn pear-btn-sm pear-btn-danger layui-icon layui-icon-refresh" cropper-event="reset"
                    title="重置"></button>
            <label for="uploadPicture" class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-upload"
                   title="选择图片"></label>
            <input class="layui-upload-file" id="uploadPicture" type="file" value="选择图片">
        </div>
        <div class="layui-form-mid layui-word-aux">建议:图片的尺寸宽高比为1:1,大小在5m以内。</div>
    </div>
</div>
</body>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script src="../../../component/pear/dimples.js"></script>
<script>
    layui.use(['jquery', 'layer', 'cropper', 'popup', 'ajax'], function () {
        let $ = layui.jquery;
        let popup = layui.popup;
        let ajax = layui.ajax;

        let options = {
            aspectRatio: 1 / 1, // 裁剪框比例
            preview: '#previewImage', // 预览div
            viewmode: 1
        };

        let sourceImage = $("#sourceImage");

        sourceImage.attr("src", parent.layui.$("#avatar").attr("src"));
        sourceImage.cropper(options);

        window.submitForm = function () {
            sourceImage.crossOrigin = 'anonymous';//解决跨域图片问题
            sourceImage.cropper("getCroppedCanvas", {
                width: 280,
                height: 140
            }).toBlob(function (blob) {
                let timeStamp = Date.parse(new Date());
                let fileName = timeStamp + '.jpg';
                let formData = new FormData();
                formData.append('file', blob, fileName);
                formData.append('fileName', fileName);
                formData.append('fileToken', timeStamp);
                ajax.send('/system/file/upload', {
                    type: "post",
                    data: formData,
                    processData: false,
                    contentType: false
                }, function (result) {
                    if (result.code == 200) {
                        // 修改 avatar 字段
                        ajax.send("/system/user/avatar/" + result.data, {
                            method: "put"
                        }, function (res) {
                            if (res.code == 200) {
                                // 关闭当前弹层
                                let user = res.data[0];
                                saveData('user', user);
                                parent.layer.close(parent.layer.getFrameIndex(window.name));
                                parent.document.getElementById("avatar").src = BASE_URL + "/system/user/avatar/" + user.avatar;
                                top.document.getElementById("avatar").src = BASE_URL + "/system/user/avatar/" + user.avatar;
                            } else {
                                popup.failure("上传失败")
                            }
                        })
                    } else {
                        popup.failure("上传失败")
                    }
                });
            });
        }

        $(".pear-btn").on('click', function () {
            let event = $(this).attr("cropper-event");
            if (event === 'rotate') {
                let option = $(this).attr('data-option');
                sourceImage.cropper('rotate', option);
            } else if (event === 'reset') {
                sourceImage.cropper('reset');
            }
            $("#uploadPicture").change(function () {
                let r = new FileReader();
                let f = this.files[0];
                let uploadFileSize = f.size / 1024;
                if (uploadFileSize > 5120) {
                    parent.layer.msg("上传文件不得超过5m", {icon: 5});
                    return false;
                }
                r.readAsDataURL(f);
                r.onload = function (e) {
                    sourceImage
                        .cropper('destroy')
                        .attr('src', this.result)
                        .cropper(options);
                };
            });
        });
    });
</script>